<template>
  <view>
    <view class="form-container">
      <uni-forms ref="form" :modelValue="formData" :rules="rules" labelPosition="top">
        <view class="hidden-title">交接班信息</view>
        <cu-cell-group>
          <uni-forms-item name="handoverTime">
            <cu-cell
              title="交接班时间"
              required
              link
              placeholder="选择时间"
              :description="formData.handoverTime"
              @click="showhandoverTimePicker()"
            ></cu-cell>
          </uni-forms-item>
          <uni-forms-item name="takeoverDeptId">
            <cu-cell
              title="接班班组"
              required
              link
              placeholder="选择部门"
              :description="formData.takeoverDeptName"
              @click="handleDeptClick()"
            ></cu-cell>
          </uni-forms-item>
          <uni-forms-item name="shiftRuleDetailId">
            <cu-cell
              title="接班班次"
              required
              link
              placeholder="选择班次"
              :description="formData.shiftRuleDetailName"
              @click="showCuShiftRuleSelect()"
            ></cu-cell>
          </uni-forms-item>
          <uni-forms-item name="takeoverUserId">
            <CuUserSelector label="接班班长" placeholder="选择人员" v-model="formData.takeoverUserId" required />
          </uni-forms-item>
          <uni-forms-item name="handoverSafetyAndEnvironmentUserId">
            <CuUserSelector
              label="安全主办"
              placeholder="选择人员"
              v-model="formData.handoverSafetyAndEnvironmentUserId"
              required
            />
          </uni-forms-item>
          <uni-forms-item name="handoverSyntheticalUserId">
            <CuUserSelector
              label="综合主办"
              placeholder="选择人员"
              v-model="formData.handoverSyntheticalUserId"
              required
            />
          </uni-forms-item>
          <uni-forms-item name="handoverBuildUserId">
            <CuUserSelector label="生产主办" placeholder="选择人员" v-model="formData.handoverBuildUserId" required />
          </uni-forms-item>
          <uni-forms-item name="handoverEquipmentUserId">
            <CuUserSelector
              label="设备主办"
              placeholder="选择人员"
              v-model="formData.handoverEquipmentUserId"
              required
            />
          </uni-forms-item>
          <uni-forms-item name="handoverOtherUser">
            <CuUserSelector
              label="其他参与人员"
              placeholder="选择人员"
              v-model="formData.handoverOtherUser"
              required
              multiple
            />
          </uni-forms-item>
        </cu-cell-group>
        <view class="submit" @click="handleSubmit">重新提交</view>
      </uni-forms>
    </view>
    <CuDateTimePicker ref="meegtingTimePicker" @change="handoverTimePickerChange" />
    <CuShiftRuleSelect ref="shiftRuleSelectRef" :id="formData.takeoverDeptId" @confirm="handleShiftRuleSelectConfirm" />
    <dept-selector ref="deptSelectorRef" :id="formData.takeoverDeptId" @change="onDeptSelectorChange"></dept-selector>
  </view>
</template>

<script>
import CuCellGroup from '@/components/cu-cell/cu-cell-group.vue'
import CuCell from '@/components/cu-cell/cu-cell.vue'
import CuDateTimePicker from '@/components/cu-date-time-picker/cu-date-time-picker.vue'
import CuShiftRuleSelect from '@/components/cu-shift-rule-select/cu-shift-rule-select.vue'
import { handoverMonitorConfirm, getMonitorUpdateInfo } from '@/api/duty-basic/duty-shifting.js'
import { getShiftRule } from '@/api/duty-basic/duty-meeting'
import CuUserSelector from '@/components/CuUserSelector/index.vue'
import DeptSelector from '@/components/dept-selector/index.vue'
import dayjs from 'dayjs'
export default {
  name: 'StepShiftsRestart',
  data() {
    return {
      formData: {
        handoverBuildUserId: undefined, // 交班生产主办
        handoverEquipmentUserId: undefined, // 交班设备主办
        handoverOtherUser: [], // 交班其他人员array
        handoverOtherUserId: [], // 交班其他人员array
        handoverSafetyAndEnvironmentUserId: undefined, // 交班安全主办
        handoverSyntheticalUserId: undefined, // 交班综合主办
        handoverTime: undefined, // 交班时间
        takeoverUserId: undefined, // 接班班长
        shiftRuleDetailId: undefined, // 交班班次
        shiftRuleDetailName: undefined, // 交班班次
        takeoverDeptId: undefined, // 接班班组
        takeoverDeptName: undefined, // 接班班组

        changeShiftInfoId: undefined,
        processTaskId: undefined
      },
      isLoading: true,
      rules: {
        handoverTime: {
          rules: [
            {
              required: true,
              errorMessage: '交接班时间不能为空'
            }
          ]
        },
        takeoverDeptId: {
          rules: [
            {
              required: true,
              errorMessage: '接班班组不能为空'
            }
          ]
        },
        shiftRuleDetailId: {
          rules: [
            {
              required: true,
              errorMessage: '接班班次不能为空'
            }
          ]
        },
        takeoverUserId: {
          rules: [
            {
              required: true,
              errorMessage: '接班班长不能为空'
            }
          ]
        },
        handoverSyntheticalUserId: {
          rules: [
            {
              required: true,
              errorMessage: '综合主办不能为空'
            }
          ]
        },
        handoverSafetyAndEnvironmentUserId: {
          rules: [
            {
              required: true,
              errorMessage: '安全主办不能为空'
            }
          ]
        },
        handoverOtherUser: {
          rules: [
            {
              required: true,
              errorMessage: '其他人员不能为空'
            }
          ]
        },
        handoverBuildUserId: {
          rules: [
            {
              required: true,
              errorMessage: '生产主办不能为空'
            }
          ]
        },
        handoverEquipmentUserId: {
          rules: [
            {
              required: true,
              errorMessage: '设备主办不能为空'
            }
          ]
        }
      }
    }
  },
  methods: {
    getMonitorUpdateInfo() {
      let curPage = getCurrentPages()
      let query = curPage[curPage.length - 1].options
      getMonitorUpdateInfo(query.id).then((res) => {
        this.formData = {
          ...res.data
        }
        this.formData.handoverOtherUserId = []
        this.formData.handoverOtherUser = []
        res.data.handoverOtherUserId.map((item) => {
          item.userId = item.user_id
          this.formData.handoverOtherUser.push(item)
          this.formData.handoverOtherUserId.push(item.user_id)
        })
      })
    },
    getShiftRule() {
      getShiftRule(this.formData.takeoverDeptId).then((res) => {
        this.formData.shiftRuleDetailName = res.data.find(
          (item) => item.shiftRuleDetailId == this.formData.shiftRuleDetailId
        ).shiftRuleDetailDescription
        this.$forceUpdate()
        this.isLoading = false
      })
    },
    onDeptSelectorChange(obj, needReset) {
      this.formData.takeoverDeptId = obj.value
      this.formData.takeoverDeptName = obj.name
      if (!this.isLoading) {
        this.formData.shiftRuleDetailName = ''
        this.formData.shiftRuleDetailId = ''
      }
      this.getShiftRule()
      this.$forceUpdate()
    },
    handleDeptClick() {
      this.$refs.deptSelectorRef.open()
    },
    showhandoverTimePicker() {
      this.$refs.meegtingTimePicker.show()
    },
    handoverTimePickerChange(value) {
      this.formData.handoverTime = value
    },
    showCuShiftRuleSelect() {
      if (!this.formData.takeoverDeptId) {
        uni.showToast({
          icon: 'none',
          title: '请先选择班组'
        })
        return
      }
      this.$refs.shiftRuleSelectRef.query()
      this.$refs.shiftRuleSelectRef.open()
    },
    handleShiftRuleSelectConfirm(data) {
      this.formData.shiftRuleDetailName = data.name
      this.formData.shiftRuleDetailId = data.value
      this.$forceUpdate()
    },
    async handleSubmit() {
      await this.$refs.form.validate()
      this.formData.handoverOtherUserId = []
      this.formData.handoverOtherUser.map((item) => {
        this.formData.handoverOtherUserId.push(item.userId)
      })
      this.formData.handoverOtherUserId = this.formData.handoverOtherUserId.join(',')
      let curPage = getCurrentPages()
      let query = curPage[curPage.length - 1].options
      this.formData.changeShiftInfoId = query.id
      this.formData.processTaskId = query.taskId
      await handoverMonitorConfirm({
        ...this.formData,
        handoverTime: dayjs(this.formData.handoverTime).format('YYYY-MM-DDTHH:mm:ss')
      })
      uni.showToast({
        title: '提交成功！',
        icon: 'success'
      })

      setTimeout(() => {
        uni.navigateBack()
      }, 1000)
    }
  },
  onReady() {
    // 需要在onReady中设置规则
    this.$refs.form.setRules(this.rules)
  },
  mounted() {
    this.getMonitorUpdateInfo()
  },
  components: { CuCellGroup, CuCell, CuDateTimePicker, CuShiftRuleSelect, CuUserSelector, DeptSelector }
}
</script>

<style lang="scss" scoped>
.submit {
  width: 600rpx;
  height: 88rpx;
  background: #454a5e;
  border-radius: 50rpx 50rpx 50rpx 50rpx;
  opacity: 1;
  text-align: center;
  line-height: 88rpx;
  font-size: 36rpx;
  font-weight: 400;
  color: #ffffff;
  margin: 0 auto;
  margin-top: 70rpx;
  margin-bottom: 70rpx;
}

.text-area {
  height: 300rpx;
}
</style>
